import React, { useEffect, memo, useCallback } from 'react';
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import {getHotRecommend} from '../../store/actionCreators'

import {HotRecommendContent} from './style'

import HYSongsCover from '@/components/songs-cover'
import HYRecommendHeader from '@/components/theme-header-rcm'

export default memo(function HYHotRecommend() {
    //redux hook
    //useSelector拿store中数据
    const state = useSelector(state => ({
        hotRecommend:state.getIn(['recommend','hotRecommend'])
    }),shallowEqual)
    // shallowEqual进行浅层比较
        
    //用来派发事件
    const dispatch = useDispatch()
    
    
    //other hook
    // useEffect用来发送请求
    useEffect(() => {
        dispatch(getHotRecommend(8))
    }, [dispatch])
    return (
        <HotRecommendContent>
            <HYRecommendHeader params={["华语","流行","摇滚","民谣","电子"]} title='热门推荐'></HYRecommendHeader>
            <div className='recommend-list'>
                {  
                    state.hotRecommend.map((item)=>{
                        return <HYSongsCover info={item} key={item.id}/>
                    })
                }
            </div>
        </HotRecommendContent>
    )
})



